<!--
- Author:  LiShibin.
- Date:    2017/7/4 0004.
- File:    list.
-->
<template>
  <div>
    <div class="Web_Box">

      <!--分类Start-->

      <div class="TwoLevelClassification bg_fff hidden tc mb20 xd f22">
        <ul>
          <li :class="{'on': currentClassify == ''}" @click="selectGoodsClassify('')">所有商品</li>
          <li v-for="item in goodsClassList" :class="{'on': currentClassify == item.stc_id}" @click="selectGoodsClassify(item.stc_id)">{{item.stc_name}}</li>
        </ul>
      </div>
      <!--分类End-->

      <!--商品分类Start-->
      <div class="CommodityClassification">
        <div class="con"
          v-infinite-scroll="loadMoreGoods"
          infinite-scroll-disabled="false"
          infinite-scroll-distance="0"
          infinite-scroll-immediate-check="false">
          <ul id="content">
            <li v-for="item in goods.data" @click="gotoGoodsDetail(item.goods_commonid)">
              <div class="pic"><img :src="$config.website + $config.goodsImgSrc + item.goods_image" alt=""/></div>
              <h3 class="slh2">{{item.goods_name}} <span>{{parseInt(item.goods_weight)}}克/{{item.goods_unit | goodsUnitTxt}}</span></h3>
              <p class="Price">￥{{item.goods_price}} <span class="yj">￥{{item.goods_marketprice}}</span></p>
            </li>
          </ul>
        </div>
        <loading-more :allLoaded="goods.allLoaded" :show="goods.data.length > 0"></loading-more>
        <empty-data :show="goods.allLoaded && goods.data.length <= 0" style="margin-top: 1.5rem"></empty-data>
      </div>
      <!--商品分类End-->
    </div>
    <pull-more-promt :show="true"></pull-more-promt>
    <footer-tab></footer-tab>
  </div>
</template>

<script>
  import {mapModules, mapRules} from 'vuet'
  import PullMorePromt from '../../components/pullMoreNotice'

  export default{
    mixins: [
      mapModules({goodsClassList: 'goodsClassList'}),
      mapRules({once: 'goodsClassList'})
    ],
    data() {
      return {
        currentClassify: this.$route.query.id || '', // ：全部类型
        goods: {requested: false, loading: false, allLoaded: false, page: 1, pageSize: 10, data: []}
      }
    },
    components: {
      'pullMorePromt': PullMorePromt
    },
    created() {
      this.getGoodsByClassify(this.currentClassify, this.goods.page, this.goods.pageSize)
    },
    watch: {
      $route () {
        this.currentClassify = this.$route.query.id || ''
        this.initGoodsList()
        this.getGoodsByClassify(this.currentClassify, this.goods.page, this.goods.pageSize)
      }
    },
    methods: {
      gotoGoodsDetail(goodsCommonid) {
        this.$router.push({name: 'goods-detail', params: {id: goodsCommonid}})
      },
      selectGoodsClassify(id) {
//        this.currentClassify = id
//        this.initGoodsList()
//        this.getGoodsByClassify(id, this.goods.page, this.goods.pageSize)
        this.$router.replace({name: 'goods-classify', query: {id: id}})
      },
      initGoodsList() {
        this.goods.requested = false
        this.goods.loading = false
        this.goods.allLoaded = false
        this.goods.page = 1
        this.goods.pageSize = 10
        this.goods.data = []
      },
      getGoodsByClassify(id, page, pageSize) {
        this.goods.loading = true
        this.$request.getGoodsByClassify(id, page, pageSize).then(data => {
          if (data.goods_list.length < this.goods.pageSize) {
            this.goods.allLoaded = true
          }
          this.goods.data = [...this.goods.data, ...data.goods_list]
        }).finally(() => {
          this.goods.requested = true
          this.goods.loading = false
        })
      },
      loadMoreGoods() {
        if (this.goods.loading || this.goods.allLoaded) { // 正在加载 或 已取得全部数据
          return
        }
        setTimeout(() => {
          this.getGoodsByClassify(this.currentClassify, ++this.goods.page, this.goods.pageSize)
        }, 500)
      }
    }
  }
</script>

<style>

</style>